<template>
  <u-dialog v-model="display_"
            :title="$t('communityChartSearch.title')"
            type="none">
    <div class="relative-position" style="min-height: 128px">
      <div>
        <q-form @submit="onSubmit">
          <q-input v-model="searchKey">
            <template v-slot:append>
              <q-btn round flat icon="search" @click="onSubmit"/>
            </template>
          </q-input>
          <q-btn v-show="false" type="Submit"/>
        </q-form>
        <q-list class="q-mt-md" separator v-show="searchList && searchList.length > 0">
          <q-item v-for="item in searchList"
                  :key="`${item.id}`" clickable
                  @click="onLoadEvent(item.id)">
            <q-item-section>
              <q-item-label>{{ item.title }}</q-item-label>
              <q-item-label caption>{{ item.artist }}</q-item-label>
            </q-item-section>
            <q-item-section side>
              <diff-icon-list :diffs="item.difficulty" :size="32"/>
            </q-item-section>
          </q-item>
        </q-list>
      </div>
    </div>
  </u-dialog>
</template>

<script>
  import UDialog from "src/components/public/UDialog";
  import DiffIconList from "src/components/player/DiffIconList";
  import {searchCommunityChart} from "src/lib/bestdoriAPI";
  import notify from "src/lib/notifyUtil";

  export default {
    name: "OfficialList",
    components: {UDialog, DiffIconList},
    props: {
      display: {
        type: Boolean,
        default: false
      }
    },
    data: function () {
      return {
        display_: this.display,
        loading: false,
        searchList: [],
        searchKey: ''
      };
    },
    watch: {
      display(n) {
        this.display_ = n;
      },
      display_(n) {
        this.$emit('onDisplayChange', n)
      }
    },
    model: {
      prop: 'display',
      event: 'onDisplayChange'
    },
    methods: {
      async onSubmit() {
        this.loading = true;
        try {
          this.searchList = await searchCommunityChart(0, this.searchKey, []);
        } catch (e) {
          notify(this.$t('public.error'), this.$t(e.message), 'clear');
        }
        this.loading = false;
      },
      onLoadEvent(id) {
        this.$root.$emit('loadByCommunitySearch', id);
        this.onCloseEvent();
      },
      onCloseEvent() {
        this.$emit('close');
      }
    },
    async mounted() {
    }
  }
</script>

<style scoped>

</style>
